<script setup lang="ts">
  import iconSvg from '~/assets/svg/index-top-icon.svg?raw'
  import CountUp from 'vue-countup-v3'
  import borderA from '~/assets/svg/index-bottom-but_border-a.svg'
  import borderB from '~/assets/svg/index-bottom-but_border-b.svg'

  defineOptions({
    name: 'Home'
  })

  const isVideo = ref(true)
  const endVal = ref(0)
  const isDisabled = ref(true)

  const numTimeout = () => {
    setTimeout(() => {
      endVal.value = 100
      nextStepTimeout()
    }, 1400)
  }

  const nextStepTimeout = () => {
    setTimeout(() => {
      isDisabled.value = false
    }, 2600)
  }

  const nextStep = () => {
    isVideo.value = !isVideo.value
    isDisabled.value = !isDisabled.value
    setTimeout(() => {
      isVideo.value = true
      endVal.value = 0
      numTimeout()
    }, 980)
  }

  onMounted(() => {
    numTimeout()
  })
</script>

<template>
  <div w-full h-full bg-black relative overflow-hidden>
    <video
      v-if="isVideo"
      src="`~/assets/video/in.mp4`"
      playsinline
      autoplay
      muted
      w-full
      h-76vh
      pt-20vh
      object-cover
      object-center
      sm:h-full
      sm:pt-0
      sm:object-contain
      id="index-home-video"
    />
    <video
      v-else
      src="`~/assets/video/out.mp4`"
      playsinline
      autoplay
      muted
      w-full
      h-100vh
      pt-4vh
      object-cover
      sm:h-full
      sm:pt-0
      id="index-home-video"
    />

    <div
      v-if="isVideo"
      absolute
      aspect="2/1"
      top-0
      left="1/2"
      translate-x="-1/2"
      translate-y="-1/2"
      rounded="774.5px/350px"
      opacity-50
      w="200%"
      sm:w-full
      style="
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(255, 0, 37, 0.8) 0,
          rgba(8, 4, 4, 0) 100%
        );
      "
    />

    <div
      v-if="isVideo"
      opacity-0
      absolute
      left="60px"
      top="100px"
      md:opacity-100
    >
      <svg :innerHTML="iconSvg" w="158.88px" h="40px"  v-if="false"></svg>
      <span style="color: #fff;font-family: UPFont;font-size: 20px;">PIZZASPACECLUB</span>
      <div
        text-white
        text-base
        tracking="0.64px"
        leading="18px"
        opacity-80
        mt-2
        text-12px
        style="font-family: 'UPFont'"
      >
        Endless Entertainment In One Platform
      </div>
    </div>

    <div
      v-if="isVideo"
      absolute
      bottom="208px"
      right="20%"
      translate-x="-1/2"
      text-center
      sm:right-20
      sm:r="84%"
      sm:translate-y="-1/2"
      sm:translate-x-0
      sm:h="190px"
    >
      <div
        group
        leading-none
        break-words
        animate-fadein
        text="44px"
        md:text="76px"
        font-bold
        leading-normal
        whitespace-nowrap
        tracking="4.65px"
        flex
        text-right
        style="color: #fd1234; font-family: 'CKTKingKong'"
        class="right-loading"
      >
        <count-up
          v-if="endVal"
          :startVal="0"
          :endVal="endVal"
          :duration="3"
        />
        <span v-else inline-block style="animation-delay: 80ms">0</span>
        <span inline-block style="animation-delay: 80ms">%</span>
      </div>
      <div
        h-12
        text-white
        opacity-80
        text="30px"
        md:text="46px"
        style="font-family: 'CKTKingKong'"
        class="right-loading"
      >
        <p v-if="isDisabled" m-0>
          <span inline-block style="animation-delay: 90ms">L</span>
          <span inline-block style="animation-delay: 96ms">O</span>
          <span inline-block style="animation-delay: 99ms">A</span>
          <span inline-block style="animation-delay: 90ms">D</span>
          <span inline-block style="animation-delay: 90ms">I</span>
          <span inline-block style="animation-delay: 90ms">N</span>
          <span inline-block style="animation-delay: 90ms">G</span>
          <span inline-block style="animation-delay: 90ms">_</span>
        </p>
      </div>
    </div>

    <button
      v-if="isVideo"
      group
      absolute
      bottom="50px"
      left="1/2"
      translate-x="-1/2"
      cursor-pointer
      transition
      flex
      justify-center
      items-center
      h="68px"
      font-extrabold
      text-2xl
      text-center
      tracking="0.96px"
      leading-normal
      op="80%"
      class="bottom-but"
      :class="isDisabled ? 'bottom-disabled' : ''"
      @click="nextStep"
    >
      <img
        :src="borderA"
        top-0
        absolute
        transition
        op-24
        z-10
        style="color: transparent"
      />
      <img
        :src="borderB"
        top="46px"
        absolute
        transition
        op-24
        z-10
        style="color: transparent"
      />
      <div
        text-white
        group
        relative
        px-11
        h-full
        flex
        items-center
        text-nowrap
        text-5
        style="font-family: 'CKTKingKong'"
        class="bottom-but-text"
      >
        <span animate-none style="animation-delay: 50ms">E</span>
        <span animate-none style="animation-delay: 72ms">n</span>
        <span animate-none style="animation-delay: 11ms">t</span>
        <span animate-none style="animation-delay: 24ms">e</span>
        <span mr-2 animate-none style="animation-delay: 94ms">r</span>
        <span animate-none style="animation-delay: 18ms">I</span>
        <span animate-none style="animation-delay: 91ms">m</span>
        <span animate-none style="animation-delay: 43ms">m</span>
        <span animate-none style="animation-delay: 47ms">e</span>
        <span animate-none style="animation-delay: 59ms">d</span>
        <span animate-none style="animation-delay: 33ms">i</span>
        <span animate-none style="animation-delay: 32ms">a</span>
        <span animate-none style="animation-delay: 74ms">t</span>
        <span animate-none style="animation-delay: 89ms">e</span>
        <span animate-none style="animation-delay: 41ms">I</span>
        <span animate-none style="animation-delay: 22ms">Y</span>
      </div>
    </button>
  </div>
</template>

<style scoped>
  #index-home-video::-webkit-media-controls-play-button,
  #index-home-video::-webkit-media-controls,
  #index-home-video::-webkit-media-controls-current-time-display,
  #index-home-video::-webkit-media-controls-slider {
    display: none;
  }

  .bottom-but:hover {
    img {
      opacity: 0.8;
    }
  }

  @keyframes blink {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    20% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
    70% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .bottom-but:hover span {
    animation: blink 0.24s;
    /* 右 */
  }

  @keyframes pfid {
    0% {
      transform: rotateY(0deg);
    }
    5% {
      transform: rotateY(180deg);
    }
    10% {
      transform: rotateY(0deg);
    }
    15% {
      transform: rotateY(180deg);
    }
    20% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(180deg);
    }
    30% {
      transform: rotateY(0deg);
    }
    35% {
      transform: rotateY(180deg);
    }
    40% {
      transform: rotateY(0deg);
    }
    45% {
      transform: rotateY(180deg);
    }
    50% {
      transform: rotateY(0deg);
    }
    55% {
      transform: rotateY(180deg);
    }
    60% {
      transform: rotateY(0deg);
    }
    65% {
      transform: rotateY(180deg);
    }
    70% {
      transform: rotateY(0deg);
    }
    75% {
      transform: rotateY(180deg);
    }
    80% {
      transform: rotateY(0deg);
    }
    85% {
      transform: rotateY(180deg);
    }
    90% {
      transform: rotateY(0deg);
    }
    95% {
      transform: rotateY(180deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }

  .right-loading span {
    animation: pfid 1s;
  }

  .bottom-disabled {
    cursor: not-allowed; /* 禁用光标 */
    opacity: 0.4; /* 略微透明，表示禁用 */
    pointer-events: none; /* 禁用点击事件 */
    transition: opacity 0.3s ease; /* 过渡效果 */
  }
  .bottom-disabled:hover {
    background-color: rgba(200, 200, 200, 0.8); /* 灰色背景 */
    color: rgba(0, 0, 0, 0.5); /* 灰色文本 */
    opacity: 1; /* 恢复不透明度 */
    /* 鼠标变圆圈加斜杠 */
  }

  /* top-[46px] absolute left-0 opacity-[16%] transition group-hover:opacity-80*/
</style>
